<!doctype html>
<html lang="en">
<head>
	<title>历史记录 | 追溯系统</title>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
	<script src="js/cos-js-sdk-v5.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .goods-card {
        margin: 0;
        background-color: @white;
    }

    .delete-button {
        height: 100%;
    }
</style>
<body>

<div id="app">
	<van-nav-bar title="商品追溯信息" left-text="返回" right-text=" "
	             left-arrow @click-left="onClickLeft"></van-nav-bar>
	<van-swipe-cell  v-for="(item,index) in historyList">
		<van-card
			centered
			:desc="item.updateTime.replace('T',' ').slice(0,19)"
			:title=item.remark
			class="goods-card"
			:thumb="`https://api.pwmqr.com/qrcode/create/?url=`+item.productId"
		@click="onClickProduct(item.productId)"></van-card>
		<template #right #default="scope">
			<van-button square text="删除" type="danger" class="delete-button" @click="onDel(item)"></van-button>
		</template>
	</van-swipe-cell>
</div>


</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
   new Vue({
        el: "#app",
        data() {
            return {
                historyList: null
            };
        },
        methods: {
            onSubmit() {
                localStorage.clear();
                let _this = this;
                $.ajax({
                    url: url,
                    method: "post",
                    success: function (result) {
                        //存下token
                        localStorage.setItem("TOKEN", result.data.token);
                        window.location.href = "scan.html";
                    },
                    error: function (result) {
                        console.log(result);
                        alert("登录失败，请检查账号及密码");
                    }
                })
            },
            onDel(item) {
                console.log(item);
                let url = "http://1.15.139.169:8082/history/del?id=" + item.id;
                $.ajax({
                    url: url,
                    method: "DELETE",
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("Authorization", localStorage.getItem("TOKEN"));
                    },
                    success: function (result) {
                        alert(result);
                        location.reload();
                    },
                    error: function (result) {
                        console.log(result);
                        alert("未知错误！点击返回历史记录页")
                        location.replace("scan.html")
                    }
                })
            },
            onClickLeft() {
                location.replace("scan.html");
            },
            onClickProduct(id){
                window.location.href = "trace.html?id=" + id;
            }
        },
        created() {
            const _this = this;
            let url = "http://1.15.139.169:8082/history/queryAll";
            $.ajax({
                url: url,
                method: "get",
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("Authorization", localStorage.getItem("TOKEN"));
                },
                success: function (result) {
                    _this.historyList = result;
                    console.log(result);
                },
                error: function (result) {
                    console.log(result);
                    alert("未知错误！点击返回历史记录页")
                    location.replace("scan.html")
                }
            })
        }
    })
</script>

</html>
